<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Gumby - A Responsive 960 Grid CSS Framework</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="humans.txt">
  
  <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
  
  <!--Facebook Metadata /-->
  <meta property="fb:page_id" content="" />
  <meta property="og:image" content="" />
  <meta property="og:description" content=""/>
  <meta property="og:title" content=""/>
  
  <!--Google+ Metadata /-->
  <meta itemprop="name" content="">
  <meta itemprop="description" content="">
  <meta itemprop="image" content="">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <!-- <link rel="stylesheet" href="css/minified.css"> -->
  
  <!-- CSS imports non-minified for staging, minify before moving to production-->
  <link rel="stylesheet" href="css/imports.css">
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<style>
	html, body {
		background: #12220a;
	}
	
	.column, .columns {
		background: #2d3e24;
		-webkit-box-shadow: inset 0 1px 0 #374c2c,
			inset 0 -1px 0 #374c2c,
			inset 1px 0 0 #374c2c,
			inset -1px 0 0 #374c2c
		;
		-moz-box-shadow: inset 0 1px 0 #374c2c,
					inset 0 -1px 0 #374c2c,
					inset 1px 0 0 #374c2c,
					inset -1px 0 0 #374c2c
				;
		box-shadow: inset 0 1px 0 #374c2c,
					inset 0 -1px 0 #374c2c,
					inset 1px 0 0 #374c2c,
					inset -1px 0 0 #374c2c
				;
		-webkit-transition-duration: .3s;
		-moz-transition-duration: .3s;
		-o-transition-duration: .3s;
		-ms-transition-duration: .3s;
		transition-duration: .3s;
	}
	
	.column:hover, .columns:hover {
		background: #445d36;
		cursor: pointer;
		-webkit-box-shadow: inset 0 1px 0 #557445,
			inset 0 -1px 0 #557445,
			inset 1px 0 0 #557445,
			inset -1px 0 0 #557445
		;
		-moz-box-shadow: inset 0 1px 0 #557445,
					inset 0 -1px 0 #557445,
					inset 1px 0 0 #557445,
					inset -1px 0 0 #557445
				;
		box-shadow: inset 0 1px 0 #557445,
					inset 0 -1px 0 #557445,
					inset 1px 0 0 #557445,
					inset -1px 0 0 #557445
				;
		-webkit-transition-duration: .3s;
		-moz-transition-duration: .3s;
		-o-transition-duration: .3s;
		-ms-transition-duration: .3s;
		transition-duration: .3s;
	}
	
	.row {
		margin-bottom: 25px;
		text-align: center;
	}
	
	h1, h2 {
		font: bold italic 220px georgia, times new roman, serif;
		color: #fbfbfb;
		letter-spacing: -.09em;
		text-shadow: 0 10px 0 #000;
		-webkit-transition-duration: 1s;
	}
	
	h2  {
		font-size: 21px;
		text-shadow: 0 4px 0 #000;
		font-weight: normal;
		line-height: 1.6;
	}
	
	p {
		font-size: 16px;
		line-height: 60px;
		margin-bottom: 0;
		color: #78a261;
		
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		-o-transition-duration: .2s;
		-ms-transition-duration: .2s;
		transition-duration: .2s;
	}
	
	.column:hover p, .columns:hover p {
		font-size: 25px;
		font-weight: bold;
		color: #bbf09f;
		
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		-o-transition-duration: .2s;
		-ms-transition-duration: .2s;
		transition-duration: .2s;
	}
	
	.head, .head:hover {
		box-shadow: none;
		margin-top: 30px;
	}
	
	.head span {
		font-weight: bold;
		color: #ffe400;
	}
	
	.head span span {
		font-size: 32px;
		font-weight: bold !important;
	}
	
	a {
		color: #fbfbfb;
	}
	
	a:hover {
		color: #ff7e00;
	}
	
	.special, .special:hover {
		background: #12220a;
	}
	
	.special:hover p {
		color: #ffe400;
	}

	@media only screen and (max-width: 767px) {
	
		h1 {
			font: bold italic 100px georgia, times new roman, serif;
			-webkit-transition-duration: .5s;
		}
	
	}
	
	
</style>

<body>

  <div class="container">
  
  	<div class="row">
  	  <div class="twelve columns special head">
  	  	<h1>Gumby</h1>
  	  	<h2>A <span>responsive <span>960</span> grid</span>
  	  	from <a href="#">Digital Surgeons</a></h2>
  	  </div>
  	</div>
  
  	<div class="row">
	    <div class="twelve columns">
	    	<p>940px</p>
	    </div>
    </div>
    
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
      <div class="eleven columns">
      	<p>860px</p>
      </div>
    </div>
    
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="two columns">
    		<p>140px</p>
    	</div>
      <div class="ten columns">
      	<p>780px</p>
      </div>
    </div>
    
    <div class="row">
    	<div class="two columns">
    		<p>140px</p>
    	</div>
    	<div class="two columns">
    		<p>140px</p>
    	</div>
    	<div class="two columns">
    		<p>140px</p>
    	</div>
    	<div class="two columns">
    		<p>140px</p>
    	</div>
    	<div class="two columns">
    		<p>140px</p>
    	</div>
    	<div class="two columns">
    		<p>140px</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="three columns">
    		<p>220px</p>
    	</div>
      <div class="nine columns">
      	<p>700px</p>
      </div>
    </div>
    
    <div class="row">
    	<div class="three columns">
    		<p>220px</p>
    	</div>
    	<div class="three columns">
    		<p>220px</p>
    	</div>
    	<div class="three columns">
    		<p>220px</p>
    	</div>
    	<div class="three columns">
    		<p>220px</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="four columns">
    		<p>300px</p>
    	</div>
      <div class="eight columns">
      	<p>620px</p>
      </div>
    </div>
    
    <div class="row">
    	<div class="four columns">
    		<p>300px</p>
    	</div>
    	<div class="four columns">
    		<p>300px</p>
    	</div>
    	<div class="four columns">
    		<p>300px</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="five columns">
    		<p>380px</p>
    	</div>
      <div class="seven columns">
      	<p>540px</p>
      </div>
    </div>
    
    <div class="row">
    	<div class="six columns">
    		<p>460px</p>
    	</div>
      <div class="six columns">
      	<p>460px</p>
      </div>
    </div>
    
    <!-- Offset Tests -->
    
    <div class="row">
    	<div class="twelve columns special">
    		<p>Columns pushed right by 'x'</p>
    	</div>
    </div>
    <div class="row">
    	<div class="eleven columns push_one">
    		<p>11 Columns Push 1</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="ten columns push_one">
    		<p>10 Columns Push 1</p>
    	</div>
    </div>
    <div class="row">
    	<div class="ten columns push_two">
    		<p>10 Columns Push 2</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="nine columns push_two">
    		<p>9 Columns Push 2</p>
    	</div>
    </div>
    <div class="row">
    	<div class="nine columns push_three">
    		<p>9 Columns Push 3</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="eight columns push_three">
    		<p>8 Columns Push 3</p>
    	</div>
    </div>
    <div class="row">
    	<div class="eight columns push_four">
    		<p>8 Columns Push 4</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="seven columns push_four">
    		<p>7 Columns Push 4</p>
    	</div>
    </div>
    <div class="row">
    	<div class="seven columns push_five">
    		<p>7 Columns Push 5</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="six columns push_five">
    		<p>6 Columns Push 5</p>
    	</div>
    </div>
    <div class="row">
    	<div class="six columns push_six">
    		<p>6 Columns Push 6</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="five columns push_six">
    		<p>5 Columns Push 6</p>
    	</div>
    </div>
    <div class="row">
    	<div class="five columns push_seven">
    		<p>5 Columns Push 7</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="four columns push_seven">
    		<p>4 Columns Push 7</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="four columns push_eight">
    		<p>4 Columns Push 8</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="three columns push_eight">
    		<p>3 Col Push 8</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="three columns push_nine">
    		<p>3 Col Push 9</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="two columns push_nine">
    		<p>2 - Push 9</p>
    	</div>
    </div>
    
    
    <div class="row">
    	<div class="two columns push_ten">
    		<p>2 - Push 10</p>
    	</div>
    </div>
    <div class="row">
    	<div class="one columns">
    		<p>60px</p>
    	</div>
    	<div class="one columns push_ten">
    		<p>60px</p>
    	</div>
    </div>
    
    
    <div class="row">
    	<div class="one columns push_eleven">
    		<p>60px</p>
    	</div>
    </div>
    
    <!-- Centering tests -->
    
    <div class="row">
    	<div class="twelve columns special">
    		<p>Centered Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="eleven columns centered">
    		<p>11 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="ten columns centered">
    		<p>10 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="nine columns centered">
    		<p>9 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="eight columns centered">
    		<p>8 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="seven columns centered">
    		<p>7 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="six columns centered">
    		<p>6 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="five columns centered">
    		<p>5 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="four columns centered">
    		<p>4 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="three columns centered">
    		<p>3 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="two columns centered">
    		<p>2 Columns</p>
    	</div>
    </div>
    
    <div class="row">
    	<div class="one columns centered">
    		<p>1 Col</p>
    	</div>
    </div>
    
  </div> <!--! end of #container -->

	
	
	
	
	
	
	
	
	
	
	<!-- Sixteen Column Grid /-->
	
	<section class="sixteen colgrid">
	
	
		<div class="container">
		
				<div class="row">
				  <div class="sixteen columns special">
				  	<p>Responsive 16 Column Grid</p>
				  </div>
				</div>
		
		  	<div class="row">
			    <div class="sixteen columns">
			    	<p>940px</p>
			    </div>
		    </div>
		
		    <div class="row">
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		      <div class="fifteen columns">
		      	<p>880px</p>
		      </div>
		    </div>
		
		    <div class="row">
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		    	<div class="one columns">
		    		<p>40</p>
		    	</div>
		      <div class="one columns">
		      	<p>40</p>
		      </div>
		      <div class="one columns">
		        <p>40</p>
		      </div>
		      <div class="one columns">
		        <p>40</p>
		      </div>
		      <div class="one columns">
		        <p>40</p>
		      </div>
		      <div class="one columns">
		        <p>40</p>
		      </div>
		    </div>
		
		    <div class="row">
		    	<div class="two columns">
		    		<p>100px</p>
		    	</div>
		      <div class="fourteen columns">
		      	<p>820px</p>
		      </div>
		    </div>
		
		    <div class="row">
		    	<div class="two columns">
		    		<p>100px</p>
		    	</div>
		    	<div class="two columns">
		    		<p>100px</p>
		    	</div>
		    	<div class="two columns">
		    		<p>100px</p>
		    	</div>
		    	<div class="two columns">
		    		<p>100px</p>
		    	</div>
		    	<div class="two columns">
		    		<p>100px</p>
		    	</div>
		      <div class="two columns">
		        <p>100px</p>
		      </div>
		      <div class="two columns">
		        <p>100px</p>
		      </div>
		      <div class="two columns">
		        <p>100px</p>
		      </div>
		    </div>
		
		    <div class="row">
		    	<div class="three columns">
		    		<p>160px</p>
		    	</div>
		      <div class="thirteen columns">
		      	<p>760px</p>
		      </div>
		    </div>
		    
		    <div class="row">
		    	<div class="three columns">
		    		<p>160px</p>
		    	</div>
		    	<div class="three columns">
		    		<p>160px</p>
		    	</div>
		    	<div class="four columns">
		    		<p>220px</p>
		    	</div>
		    	<div class="three columns">
		    		<p>160px</p>
		    	</div>
		    	<div class="three columns">
		    		<p>160px</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="four columns">
		    		<p>220px</p>
		    	</div>
		      <div class="twelve columns">
		      	<p>700px</p>
		      </div>
		    </div>
		
		    <div class="row">
		    	<div class="four columns">
		    		<p>220px</p>
		    	</div>
		    	<div class="four columns">
		    		<p>220px</p>
		    	</div>
		      <div class="four columns">
		        <p>220px</p>
		      </div>
		      <div class="four columns">
		        <p>220px</p>
		      </div>
		    </div>
		
		    <div class="row">
		    	<div class="five columns">
		    		<p>280px</p>
		    	</div>
		      <div class="eleven columns">
		      	<p>640px</p>
		      </div>
		    </div>
		    
		    <div class="row">
		    	<div class="five columns">
		    		<p>280px</p>
		    	</div>
		      <div class="six columns">
		      	<p>340px</p>
		      </div>
		      <div class="five columns">
		      	<p>280px</p>
		      </div>
		    </div>
		    
		    <div class="row">
		    	<div class="six columns">
		    		<p>340px</p>
		    	</div>
		      <div class="ten columns">
		      	<p>580px</p>
		      </div>
		    </div>
		    
		    <div class="row">
		    	<div class="six columns">
		    		<p>340px</p>
		    	</div>
		    	<div class="four columns">
		    	  <p>220px</p>
		    	</div>
		    	<div class="six columns">
		    		<p>340px</p>
		    	</div>
		    </div>
		    
		    <div class="row">
		    	<div class="seven columns">
		    		<p>400px</p>
		    	</div>
		      <div class="nine columns">
		      	<p>520px</p>
		      </div>
		    </div>
		    
		    <div class="row">
		    	<div class="seven columns">
		    		<p>400px</p>
		    	</div>
		    	<div class="two columns">
		    		<p>100px</p>
		    	</div>
		    	<div class="seven columns">
		    		<p>400px</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="eight columns">
		    		<p>460px</p>
		    	</div>
		      <div class="eight columns">
		      	<p>460px</p>
		      </div>
		    </div>
		
		    <!-- Offset Tests -->
		
		     <div class="row">
		    	<div class="sixteen columns special">
		    		<p>Columns pushed right by 'x'</p>
		    	</div>
		    </div>
		    <div class="row">
		        <div class="fifteen columns push_one">
		            <p>15 Columns Push 1</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="one columns">
		            <p>40px</p>
		        </div>
		        <div class="fourteen columns push_one">
		            <p>14 Columns Push 1</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="fourteen columns push_two">
		            <p>14 Columns Push 2</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="one columns">
		            <p>40px</p>
		        </div>
		        <div class="thirteen columns push_two">
		            <p>13 Columns Push 2</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="thirteen columns push_three">
		            <p>13 Columns Push 3</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="one columns">
		            <p>40px</p>
		        </div>
		        <div class="twelve columns push_three">
		            <p>12 Columns Push 3</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="twelve columns push_four">
		            <p>12 Columns Push 4</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="one columns">
		            <p>40px</p>
		        </div>
		        <div class="eleven columns push_four">
		            <p>11 Columns Push 4</p>
		        </div>
		    </div>
		    <div class="row">
		        <div class="eleven columns push_five">
		            <p>11 Columns Push 5</p>
		        </div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="ten columns push_five">
		    		<p>10 Columns Push 5</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="ten columns push_six">
		    		<p>10 Columns Push 6</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="nine columns push_six">
		    		<p>9 Columns Push 6</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="nine columns push_seven">
		    		<p>9 Columns Push 7</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="eight columns push_seven">
		    		<p>8 Columns Push 7</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="eight columns push_eight">
		    		<p>8 Columns Push 8</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="seven columns push_eight">
		    		<p>7 Columns Push 8</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="seven columns push_nine">
		    		<p>7 Columns Push 9</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="six columns push_nine">
		    		<p>6 Columns Push 9</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="six columns push_ten">
		    		<p>6 Columns Push 10</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="five columns push_ten">
		    		<p>5 Columns Push 10</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="five columns push_eleven">
		    		<p>5 Columns Push 11</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="four columns push_eleven">
		    		<p>4 Columns Push 11</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="four columns push_twelve">
		    		<p>4 Columns Push 12</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="three columns push_twelve">
		    		<p>3 Col Push 12</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="three columns push_thirteen">
		    		<p>3 Col Push 13</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="two columns push_thirteen">
		    		<p>2 - Push 12</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="two columns push_fourteen">
		    		<p>2 - Push 14</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns">
		    		<p>40px</p>
		    	</div>
		    	<div class="one columns push_fourteen">
		    		<p>40px</p>
		    	</div>
		    </div>
		    <div class="row">
		    	<div class="one columns push_fifteen">
		    		<p>40px</p>
		    	</div>
		    </div>
		
		
		    <!-- Centering tests -->
		
		    <div class="row">
		    	<div class="sixteen columns special">
		    		<p>Centered Columns</p>
		    	</div>
		    </div>
		    
		    <div class="row">
		      <div class="fifteen columns centered">
		        <p>15 Columns</p>
		      </div>
		    </div>
		
		    <div class="row">
		      <div class="fourteen columns centered">
		        <p>14 Columns</p>
		      </div>
		    </div>
		
		    <div class="row">
		      <div class="thirteen columns centered">
		        <p>13 Columns</p>
		      </div>
		    </div>
		
		    <div class="row">
		      <div class="twelve columns centered">
		        <p>12 Columns</p>
		      </div>
		    </div>
		
		    <div class="row">
		      <div class="eleven columns centered">
		        <p>11 Columns</p>
		      </div>
		    </div>
		
		    <div class="row">
		    	<div class="ten columns centered">
		    		<p>10 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="nine columns centered">
		    		<p>9 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="eight columns centered">
		    		<p>8 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="seven columns centered">
		    		<p>7 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="six columns centered">
		    		<p>6 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="five columns centered">
		    		<p>5 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="four columns centered">
		    		<p>4 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="three columns centered">
		    		<p>3 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="two columns centered">
		    		<p>2 Columns</p>
		    	</div>
		    </div>
		
		    <div class="row">
		    	<div class="one columns centered">
		    		<p>1 Col</p>
		    	</div>
		    </div>
		
		  </div> <!--! end of #container -->
	
	
	</section>

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

  <script src="js/libs/gumby.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <!-- end scripts-->

	
  <!-- Change UA-XXXXX-X to be your site's ID -->
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>


  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->
  
  <!-- Social Widget Rendering Javascript /-->
  <script src="http://platform.twitter.com/widgets.js"></script>
  <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
  <script type="text/javascript">
    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
  </script>
  <!-- End Social Widget Rendering Javascript /-->
</body>
</html>
